<template>
  <div class="duplication-check">
    <h4>重复度检测结果</h4>
    
    <div v-if="loading" class="loading">
      <el-icon><Loading /></el-icon>
      正在检测重复度...
    </div>
    <div v-else-if="error" class="error">
      <el-alert type="error" :title="error" show-icon />
    </div>
    <div v-else-if="results && results.length > 0" class="results">
      <el-table :data="results" border>
        <el-table-column prop="algorithm" label="算法" width="120">
          <template #default="{ row }">
            <el-tooltip :content="getAlgorithmDescription(row.algorithm)" placement="top">
              <el-tag style="cursor: help">{{ getAlgorithmName(row.algorithm) }}</el-tag>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="similarity" label="重复度" width="100">
          <template #default="{ row }">
            <span :class="getSimilarityClass(row.similarity)">
              {{ (row.similarity * 100).toFixed(1) }}%
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="targetSummary" label="重复总结">
          <template #default="{ row }">
            <div class="target-summary">
              <div class="course-info">
                <strong>{{ row.targetSummary.courseName }}</strong>
                <span class="semester">{{ row.targetSummary.semester }}</span>
              </div>
              <div class="teacher-info">
                教师：{{ row.targetSummary.teacherName }}
              </div>
              <div class="mission-info">
                教学任务：{{ row.targetSummary.className || '未知教学任务' }}
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div v-else class="no-results">
      <el-empty description="未发现重复内容" />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, defineProps } from 'vue'
import { Loading } from '@element-plus/icons-vue'
import { textcheckApi } from '@/api/text-check'
import { ElMessage } from 'element-plus'

const props = defineProps({
  summaryId: {
    type: [String, Number],
    required: true
  }
})

const loading = ref(false)
const error = ref('')
const results = ref([])

const algorithmNames = {
  cosine: '余弦相似度',
  jaccard: 'Jaccard相似度', 
  lcs: '最长公共子序列',
  editDistance: '编辑距离'
}

const algorithmDescriptions = {
  cosine: '基于向量夹角计算文本相似度，适用于检测语义相似性。值越接近1表示越相似。',
  jaccard: '基于集合交集与并集的比值，适用于检测词汇重叠程度。值越接近1表示词汇重叠越多。',
  lcs: '最长公共子序列算法，检测文本中相同顺序的字符序列。',
  editDistance: '基于编辑距离（莱文斯坦距离），计算将一个文本转换为另一个所需的最少编辑操作数。'
}

const getAlgorithmName = (algorithm) => {
  return algorithmNames[algorithm] || algorithm
}

const getAlgorithmDescription = (algorithm) => {
  return algorithmDescriptions[algorithm] || '未知算法'
}

const getSimilarityClass = (similarity) => {
  if (similarity >= 0.8) return 'similarity-high'
  if (similarity >= 0.5) return 'similarity-medium'
  return 'similarity-low'
}

const getSimilarityDescription = (similarity) => {
  const percentage = (similarity * 100).toFixed(1)
  if (similarity >= 0.8) {
    return `高相似度 (${percentage}%) - 内容存在明显重复，建议仔细审核`
  } else if (similarity >= 0.5) {
    return `中等相似度 (${percentage}%) - 内容有一定重复，建议关注`
  } else if (similarity >= 0.2) {
    return `低相似度 (${percentage}%) - 内容基本原创，少量相似属正常范围`
  } else {
    return `很低相似度 (${percentage}%) - 内容原创性较高`
  }
}

const checkDuplication = async () => {
  if (!props.summaryId) {
    error.value = 'summaryId为空'
    return
  }
  
  loading.value = true
  error.value = ''
  results.value = []
  
  try {
    const response = await textcheckApi.checkSummaryDuplication(props.summaryId)
    
    // 修复：直接使用response，不需要.data
    const allResults = response || []
    // 过滤掉余弦相似度和jaccard相似度
    results.value = allResults.filter(result => 
      result.algorithm !== 'cosine' && result.algorithm !== 'jaccard'
    )
  } catch (err) {
    error.value = err.message || '检测重复度失败'
    ElMessage.error(error.value)
  } finally {
    loading.value = false
  }
}

onMounted(() => {
  checkDuplication()
})

// 暴露方法供父组件调用
defineExpose({
  refresh: checkDuplication
})
</script>

<style scoped>
.duplication-check {
  margin-top: 20px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
}

.duplication-check h4 {
  margin: 0 0 15px 0;
  color: #333;
  font-size: 16px;
}

.loading {
  text-align: center;
  padding: 20px;
  color: #666;
}

.loading .el-icon {
  margin-right: 8px;
}

.error {
  margin-bottom: 15px;
}

.results {
  margin-top: 15px;
}

.target-summary .course-info {
  margin-bottom: 5px;
}

.target-summary .semester {
  margin-left: 10px;
  color: #666;
  font-size: 12px;
}

.target-summary .teacher-info {
  color: #888;
  font-size: 12px;
}

.target-summary .mission-info {
  color: #888;
  font-size: 12px;
}

.similarity-high {
  color: #f56c6c;
  font-weight: bold;
}

.similarity-medium {
  color: #e6a23c;
  font-weight: bold;
}

.similarity-low {
  color: #67c23a;
}

.no-results {
  text-align: center;
  padding: 40px 20px;
}

/* 鼠标悬停提示样式 */
.el-tag {
  transition: all 0.3s ease;
}

.el-tag:hover {
  transform: scale(1.05);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
</style>